{% extends "layout.html" %}
{% block title %}User list{% endblock %}
{% block head %}
  {{ super() }}
  <style type="text/css">
    .important { color: #336699; }
  </style>
{% endblock %}
{% block content %}
  <p class="important">
  	search for users ......
   </p>
   
   <form name='search'>
		<div style='display: table-row'>
   		 	<input type="text" id='q' name="q" autocomplete="off" dir="ltr" spellcheck="false">
   		</div>
   		<div style='display: table-row'>
   			<input type="button" id='sbtn' value="Search">
   		</div>
   		
   </form>
<br>
<div id='results' style='display: table' class="results">

</div>
<hr>
<br>
<script type="text/javascript">
	$(document).ready(function() {
  		$("#sbtn").click(function(){
    		var query = $("#q").val();
    		$.post(
    			"users.html",
      			{ q: query },
      			function(data) {
      				
      				$('#results').html('');
      				
        			if(data.users) {
        				var obj = data.users;
        				for (var p in obj) {
        					
        					$('<div/>', {className:'results', style:'display: table-row'})
        				 		.append( $('<div/>', {className:'user', text:p, style:'display: table-cell'} ) )
        				 		.append( $('<div/>', {className:'credit', text:obj[p], style:'display: table-cell'}))
        				 		.prependTo( '#results' );
        				}
        			}
        			else {
        				console.debug('nothing to do!!');	
        			}
        			
      			}
    		);
  		});
	});
	
	function objToString (obj) {
	    var str = '';
	    for (var p in obj) {
	        if (obj.hasOwnProperty(p)) {
	            str += p + '::' + obj[p] + '\n';
	        }
	    }
	    return str;
	}
	
</script>
{% endblock %}